<template>
<div class="wrapper">
  <nav class="nav">
    <nav-container v-on:showMenuOverlay="showMenuExec" v-show="!show_menu_bol">
					<span slot="navbody">
						<section class="navbody-menu body">
							<div class="accountbtn menubtn account">
								<h2>
									<span class="welcome">{{hello}}</span>
									<span class="nickname">{{NickName}}</span>
									&nbsp;☕
								</h2>
								<ul>
									<li @click="pageRedir(2, 'account')">
										<a href="javascript:;" :class="{'active-menu':curActive == 'account'}">
											账户一览
										</a>
									</li>
									<li @click="pageRedir(6, 'activity')">
										<a href="javascript:;" :class="{'active-menu':curActive == 'activity'}">
											消费记录
										</a>
									</li>
									<li @click="pageRedir(7, 'rewards')">
										<a href="javascript:;" :class="{'active-menu':curActive == 'rewards'}">
											星享好礼
										</a>
									</li>
									<li @click="pageRedir(8, 'profile')">
										<a href="javascript:;" :class="{'active-menu':curActive == 'profile'}">
											管理我的账户
										</a>
									</li>
									<li @click="pageRedir(5, 'starbucks-rewards')">
										<a href="javascript:;" :class="{'active-menu':curActive == 'starbucks-rewards'}">
											关于星享俱乐部
										</a>
									</li>
								</ul>
							</div>
						</section>
					</span>
    </nav-container>
    <nav-overlay v-on:closeMenuOverlay="closeMenuExec" v-show="show_menu_bol">
    </nav-overlay>
    <nav-mobile v-on:showMenuOverlay="showMenuExec"></nav-mobile>
  </nav>
  <div class="content account-summary-login" v-if="lgMedia || !show_menu_bol">
    <div class="loading-svg center" v-if="loading" style="margin:-24px 0;padding: 24px 0;background: #FFF;">
      <img src="@/assets/loading-svg/loading-bubbles.svg"/>
    </div>
    <div class="wrapper" v-show="!loading">
      <section class="account-info-login white" :class="{'bg-silver':StarLev == 'White', 'bg-green':StarLev == 'Green', 'bg-gold':StarLev == 'Gold'}">
        <header class="clearfix">
          <h2>{{StarLev_CN}}</h2>
          <img src="@/assets/icons/icon-rewards-white.svg" v-if="StarLev == 'White'">
          <img src="@/assets/icons/icon-rewards.svg" v-if="StarLev !== 'White'">
        </header>
        <div class="body" :class="{'star-bg-welcome':!mbMedia && StarLev == 'White', 'star-bg-green':!mbMedia && StarLev == 'Green', 'star-bg-gold':!mbMedia && StarLev == 'Gold'}">
          <div class="user-info">
            <div class="tier-progress" v-show="StarLev !== 'Gold'">
              <div class="star-count">
                {{StarsNum}}
                <span>
											<img src="@/assets/icons/icon-star-white.svg" v-if="StarLev == 'White'">
											<img src="@/assets/icons/icon-star-green.svg" v-if="StarLev == 'Green'">
										</span>
              </div>
              <div class="tier-bg" :class="{'tier-bg-silver': StarLev == 'White', 'tier-bg-green': StarLev == 'Green', 'tier-bg-gold': StarLev == 'Gold'}">
                <div class="fill fill-white"></div>
                <div class="fill fill-green"></div>
              </div>
              <div class="tier-tag white-tag">
                <span>银星级</span>
              </div>
              <div class="tier-tag green-tag">
                <span>玉星级</span>
              </div>
              <div class="tier-tag gold-tag">
                <span>金星级</span>
              </div>
            </div>
            <div class="tier-progress" v-show="StarLev == 'Gold'">
              <div class="star-count">
                {{StarsNum}}
                <span>
											<img src="@/assets/icons/icon-star-gold.svg">
										</span>
              </div>
              <div class="tier-bg tier-bg-gold">
                <div class="fill fill-gold"></div>
              </div>
              <div class="tier-tag gold-tag-for-keep">
                <span>金星级</span>
              </div>
              <div class="tier-tag keep-tag">
                <span>保级</span>
              </div>
            </div>
            <div class="star-lev">
              <span>目前星星数：{{StarsNum}}</span>
            </div>
            <div class="privileges">
              <div class="privileges-title">
                <span>会员权益：</span>
              </div>
              <div class="privileges-items">
                <div class="sBadge-member sBadge-green clearfix">
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-white': StarLev !== 'White'}">
                      <img src="@/assets/icons/icon-coupon-white.svg" v-if="GreenLock">
                      <img src="@/assets/icons/icon-coupon-green.svg" v-if="!GreenLock && StarLev == 'Green'">
                      <img src="@/assets/icons/icon-coupon-gold.svg" v-if="!GreenLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-green" v-if="GreenLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>玉星晋级饮品券</span>
                  </div>
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-white': StarLev !== 'White'}">
                      <img src="@/assets/icons/icon-birthday-white.svg" v-if="GreenLock">
                      <img src="@/assets/icons/icon-birthday-green.svg" v-if="!GreenLock && StarLev == 'Green'">
                      <img src="@/assets/icons/icon-birthday-gold.svg" v-if="!GreenLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-green" v-if="GreenLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>生日饮品券</span>
                  </div>
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-white': StarLev !== 'White'}">
                      <img src="@/assets/icons/icon-coupon-white.svg" v-if="GreenLock">
                      <img src="@/assets/icons/icon-coupon-green.svg" v-if="!GreenLock && StarLev == 'Green'">
                      <img src="@/assets/icons/icon-coupon-gold.svg" v-if="!GreenLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-green" v-if="GreenLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>金星在望饮品券</span>
                  </div>
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-white': StarLev !== 'White'}">
                      <img src="@/assets/icons/icon-crown-white.svg" v-if="GreenLock">
                      <img src="@/assets/icons/icon-crown-green.svg" v-if="!GreenLock && StarLev == 'Green'">
                      <img src="@/assets/icons/icon-crown-gold.svg" v-if="!GreenLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-green" v-if="GreenLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>永享玉星级</span>
                  </div>
                </div>
                <div class="sBadge-member sBadge-gold clearfix">
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-green': StarLev == 'Green', 'badge-bg-white': StarLev == 'Gold'}">
                      <img src="@/assets/icons/icon-coupon-white.svg" v-if="GoldLock">
                      <img src="@/assets/icons/icon-coupon-gold.svg" v-if="!GoldLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-gold" v-if="GoldLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>金星晋级饮品券</span>
                  </div>
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-green': StarLev == 'Green', 'badge-bg-white': StarLev == 'Gold'}">
                      <img src="@/assets/icons/icon-coupon-white.svg" v-if="GoldLock">
                      <img src="@/assets/icons/icon-coupon-gold.svg" v-if="!GoldLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-gold" v-if="GoldLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>周年庆饮品券</span>
                  </div>
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-green': StarLev == 'Green', 'badge-bg-white': StarLev == 'Gold'}">
                      <img src="@/assets/icons/icon-drinks-white.svg" v-if="GoldLock">
                      <img src="@/assets/icons/icon-drinks-gold.svg" v-if="!GoldLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-gold" v-if="GoldLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>好礼星星兑换</span>
                  </div>
                  <div class="items">
                    <div class="sBadge" :class="{'badge-bg-grey': StarLev == 'White', 'badge-bg-green': StarLev == 'Green', 'badge-bg-white': StarLev == 'Gold'}">
                      <img src="@/assets/icons/icon-camera-white.svg" v-if="GoldLock">
                      <img src="@/assets/icons/icon-camera-gold.svg" v-if="!GoldLock && StarLev == 'Gold'">
                    </div>
                    <div class="lock bg-gold" v-if="GoldLock">
                      <img src="@/assets/icons/icon-lock-white.svg">
                    </div>
                    <span>专属金卡</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="corner">
								<span>
									<strong>会员到期日：</strong>{{ExpireDate}}
								</span>
            <span>再积 {{StarsOfNextLevNeed - StarsNum}} 颗星即可升到金星级</span>
          </div>
        </div>
      </section>
      <section class="account-svc-login bg-white black">
        <header class="clearfix" v-if="CardNum != 0">
          <h2>管理星礼卡</h2>
          <img src="@/assets/icons/icon-card.svg">
          <strong>{{CardNum}}</strong>
        </header>
        <div class="body" v-if="CardNum != 0">
          <div class="scroll clearfix">
            <div class="card-item" v-for=" (item, index) in SvcCard.slice(0, 6)">
              <span class="balance">¥ {{item.Balance}}</span>
              <img :src="'/static/images/svc-card/'+item.CardImage">
              <span class="card_id">{{item.CardID}}</span>
            </div>
          </div>
        </div>
        <footer v-if="CardNum != 0">
          <span @click="pageRedir(13)">查看所有卡片</span>
        </footer>
        <div class="demo-wrapper clearfix" v-if="CardNum == 0">
          <div class="card-demo">
            <img src="/static/images/svc-card/svc_main_flower@3x.png">
          </div>
          <div class="desc-demo">
            <div class="title">
              <img src="@/assets/icons/icon-card.svg">
              <span>星礼卡</span>
            </div>
            <h2>用一份星礼 让心意相随</h2>
            <h4>星礼卡，表达感谢与传递祝福的最佳方式</h4>
            <div class="card-btn clearfix">
              <span class="button btn-bigger">绑定星礼卡/星礼包</span>
              <span class="button btn-bigger">查看详情</span>
            </div>
          </div>
        </div>
      </section>
      <section class="account-myrewards-login bg-white black">
        <header class="clearfix">
          <h2>星享好礼</h2>
          <img src="@/assets/icons/icon-gift.svg">
          <strong>{{RewardsNum}}</strong>
        </header>
        <div class="body">
          <ul class="list">
            <li v-for="(item, index) in MyRewards.slice(0, 4)" v-show="ExpensesRecord.length != 0">
              <img src="@/assets/icons/icon-reward-gold.svg">
              <h4>{{item.Title}}</h4>
              <p>{{item.ExpireDate}}</p>
            </li>
            <li v-if="ExpensesRecord.length == 0">
              <h4 style="margin:12px 0 12px -36px;">您目前没有任何的星享好礼。</h4>
            </li>
          </ul>
        </div>
        <footer>
          <span @click="pageRedir(7)">查看好礼详情</span>
        </footer>
      </section>
      <section class="account-activity-login bg-white black">
        <header class="clearfix">
          <h2>消费记录</h2>
          <img src="@/assets/icons/icon-receipt.svg">
        </header>
        <div class="body">
          <ul class="list">
            <li v-for="(item, index) in ExpensesRecord.slice(0, 4)" v-show="ExpensesRecord.length != 0">
              <img src="@/assets/icons/icon-coffee-dark.svg">
              <h4>
                <span>{{item.StoreName}}</span>
                <span>￥{{item.TotalPrice.toFixed(2)}}</span>
              </h4>
              <p>{{item.ConsumeDate.split(" ")[0]}}</p>
            </li>
            <li v-if="ExpensesRecord.length == 0">
              <h4 style="margin:12px 0 12px -36px;">您目前没有任何的消费记录，到邻近的星巴克消费吧。</h4>
            </li>
          </ul>
        </div>
        <footer>
          <span @click="pageRedir(6)">查看更多</span>
        </footer>
      </section>
    </div>
  </div>
</div>
</template>

<script>
import '@/assets/css/bootstrap.min.css'
import '@/assets/css/swiper.min.css'
import '@/assets/css/init.css'
import '@/assets/css/styles.css'
import '@/assets/css/account.css'
import '@/assets/css/userinfo.css'
import NavContainer from '@/components/navContainer'
import NavOverlay from '@/components/navOverlay'
import NavMobile from '@/components/navMobile'
import TokenTools from '@/utils/tokenTools'
import CookieTools from '@/utils/cookieTools'
import axios from 'axios'
    export default {
        name: "index",
      metaInfo: {
        title: '星享俱乐部',
        titleTemplate: '%s | 星巴克',
        meta: [
          {
            name: 'keywords',
            content: ''
          },
          {
            name: 'description',
            content: '星享俱乐部'
          }
        ]
      },
      data(){
        return {
          show_menu_bol: false,
          lgMedia: window.matchMedia('(min-width: 1025px)').matches,
          mbMedia: window.matchMedia('(max-width: 640px)').matches,
          curActive: 'account',
          welcome: [
            '早上好!',
            '上午好!',
            '中午好!',
            '下午好!',
            '晚上好!'
          ],
          hello: '您好!',
          loading: false,
          StarLev: '',
          StarLev_CN:'',
          StarsNum: '',
          StarsOfNextLevNeed: '',
          ExpireDate: '',
          GreenLock: true,
          GoldLock: true,
          SvcCard: '',
          CardNum: '',
          MyRewards: '',
          RewardsNum: '',
          ExpensesRecord: ''
        }
      },
      components: {
        NavContainer: NavContainer,
        NavOverlay: NavOverlay,
        NavMobile: NavMobile
      },
      computed: {
        NickName(){
          return this.$store.state.NickName;
        }
      },
      mounted(){
        const _self = this;
        window.matchMedia('(min-width: 1025px)').addListener(()=>{
          _self.lgMedia = window.matchMedia('(min-width: 1025px)').matches;
        });
        window.matchMedia('(max-width: 640px)').addListener(()=>{
          _self.mbMedia = window.matchMedia('(max-width: 640px)').matches;
        });
        this.getHelloWord();
        this.checkExpire();
        this.trackingVisitor();
      },
      methods: {
        showMenuExec(){
          this.show_menu_bol = true;
        },
        closeMenuExec(){
          this.show_menu_bol = false;
        },
        pageRedir(item, curName){
          if(curName){
            this.curActive = curName;
          }
          this.$store.commit('pageRedir', item);
        },
        checkExpire(){
          this.loading = true;

          let ReqToken = TokenTools.TokenSetting('sbux_token_ce');

          if(ReqToken){
            axios.post("users/checkExpireDate", {
              ReqToken: ReqToken
            }).then((res)=>{
              let data = res.data;
              if(data.status == '0'){
                CookieTools.DelCookie('sbux_token_ce');
                this.getAccountInfo();
              }
              CookieTools.DelCookie('sbux_token_ce');
            })
          }
        },
        getHelloWord(){
          let time = new Date(),
            hours = time.getHours(),
            index = '';

          if(hours >= 0 && hours < 8) {
            index = 0;
          }else if(hours >= 8 && hours < 12) {
            index = 1;
          }else if(hours >= 12 && hours < 14) {
            index = 2;
          }else if(hours >= 14 && hours < 20) {
            index = 3;
          }else {
            index = 4;
          }

          this.hello = this.welcome[index];
          this.$store.commit('updateUserInfo', CookieTools.GetCookie('NickName'));
        },
        getAccountInfo(){
          this.loading = true;

          let ReqToken = TokenTools.TokenSetting('sbux_token_gai');

          if(ReqToken){
            axios.post("users/accountInfo", {
              ReqToken: ReqToken
            }).then((res)=>{
              let data = res.data;
              if(data.status == '0'){
                let res = data.result;

                /* ***星级部分*** */
                this.StarLev = res.MemberShip.StarLevel;
                this.StarsNum = res.MemberShip.StarsNumber;
                this.StarsOfNextLevNeed = res.MemberShip.StarsOfNextLevNeed;
                this.ExpireDate = res.MemberShip.ExpireDate;
                this.starLevRender();

                /* ***管理星礼卡部分*** */
                this.SvcCard = res.SvcCard;
                this.CardNum = res.SvcCard.length;

                /* ***星享好礼部分*** */
                let MyRewards = res.MyRewards,
                  AvlRewd = [];
                for(let i = 0; i < MyRewards.length; i++){
                  if(MyRewards[i].State === 'AVL'){
                    AvlRewd.push(MyRewards[i]);
                  }
                }
                this.MyRewards = AvlRewd;
                this.RewardsNum = AvlRewd.length;

                /* ***消费记录部分*** */
                this.ExpensesRecord = res.ExpensesRecord;

                /* ***删除验证使用后的token*** */
                CookieTools.DelCookie('sbux_token_gai');

                this.loading = false;
              }
            })
          }
        },
        starLevRender(){
          let whiteWD = '0%',
            greenWD = '0%',
            goldWD = '0%',
            left_dis = '0%';

          switch(this.StarLev){
            case 'White':
              this.StarLev_CN = '银星级';
              this.GreenLock = true;
              this.GoldLock = true;
              whiteWD = Math.floor((this.StarsNum/this.StarsOfNextLevNeed)*25);
              greenWD = 0;
              break;
            case 'Green':
              this.StarLev_CN = '玉星级';
              this.GreenLock = false;
              this.GoldLock = true;
              whiteWD = 25;
              greenWD = Math.floor((this.StarsNum/this.StarsOfNextLevNeed)*75);
              break;
            case 'Gold':
              this.StarLev_CN = '金星级';
              this.GreenLock = false;
              this.GoldLock = false;
              goldWD = Math.floor((this.StarsNum/this.StarsOfNextLevNeed)*100);
              break;
          }

          if(this.StarLev == 'Gold'){
            left_dis = goldWD + '%';

            $('.fill-gold').css({
              'width': goldWD + '%'
            });

            $('.star-count').css({
              'left': 'calc(' + left_dis + ' - 55px)'
            });
          }else{
            left_dis = whiteWD + greenWD + '%';

            $('.fill-white').css({
              'width': whiteWD + '%'
            });

            $('.fill-green').css({
              'width': greenWD + '%'
            });

            $('.star-count').css({
              'left': 'calc(' + left_dis + ' - 55px)'
            });
          }
        },
        trackingVisitor() {
          let storage = window.sessionStorage || null;
          if(storage) {
            let VisitorID = storage.getItem('VisitorID'),
              page = '我的账户-主页';
            if(!VisitorID) return;
            axios.post('users/tracking',{
              visitorID: VisitorID,
              page: page
            })
          }

        }
      }
    }
</script>


